<template>
    <div class="action_contnet">
        <panle title='直播名单' content="未参加day2直播名单"></panle>
        <!--筛选条件-->
        <div class="shaixuan3">
            <div style="display: flex;flex-direction: column;">
                <div style="margin:20px">
                    <span style="padding: 0 10rem 0 0;">总计：{{ total }} 人</span>
                    <span style="padding: 0 10rem;">改邀约：{{ other_yaoyue }} 人</span>
                    <span style="padding: 0 10rem;">改约成交：{{ other_chengjiao }} 人</span>
                    <span style="padding: 0 10rem;">改约成交率：{{ other_chengjiao_lv }} </span>
                </div>
            </div>
            <div class="daohang_content">
                <PersButton type="text" size="mini" icon="el-icon-goback" label="返回上一页" @click="goback"></PersButton>
            </div>
            <div class="first_table">
                <el-table align="center" :data="tableData" style="width: 100%;margin-bottom: 20px;" row-key="id" border stripe default-expand-all>
                    <el-table-column  align="center" header-align="center" prop="wx_avatar" label="微信头像">
                        <template slot-scope="scope">
                            <el-image :src="scope.row.wx_avatar" fit="fill" style="width: 60px;height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="wx_name" label="昵称"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="phone" label="手机号"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="sender" label="邀请助教"> </el-table-column>
                    <el-table-column align="center"  header-align="center" prop="live_online_time" label="day1观看时长"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="other_invitation" label="是否邀约其他day2场次数"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="other_signin" label="到课其他day2场次数"></el-table-column>
                    <el-table-column align="center"  header-align="center" prop="other_chengjiao" label="其他day2场是否成交"></el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNumber" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" background layout="total, sizes, prev, pager, next, jumper" :total="total">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>


<script>
    
    import Panle from '@/components/Panle';
    import { day2NotDaoke } from '@/api/live/manager';
    import PersButton from '@/components/PersButton';

    export default {
        components:{
            Panle,
            PersButton
        },
        data(){
            return {
                tableData:[],
                other_yaoyue:0,
                other_chengjiao:0,
                other_chengjiao_lv:'0.00%',
                pageSize: 10, //一页显示多少条
                pageNumber: 1,
                total: 0, //总页数
            }
        },
        created(){
            this.init();
        },
        activated() {
            this.init();
        },
        methods: {
            refresh(e){
                this.init();
            },
            resetForm(formName) {
                this.init();
            },
            init(){
                let _param = {
                    liveDay1:this.$route.query.liveDay1,
                    liveDay2:this.$route.query.liveDay2,
                    pageSize:this.pageSize,
                    pageNumber:this.pageNumber
                }

                day2NotDaoke(_param).then((res) => {
                    if (res.code == 200) {
                        this.total = res.data.total;
                        this.tableData = res.data.list;
                        this.other_yaoyue = res.data.headData.other_yaoyue;
                        this.other_chengjiao = res.data.headData.other_chengjiao;
                        this.other_chengjiao_lv = res.data.headData.other_chengjiao_lv;
                    } else {
                        this.msgError(res.msg);
                    }
                })

            },
            handleSizeChange (e) {
                this.pageSize = e;
                this.init();
            },
            handleCurrentChange (e) {
                this.pageNumber = e;
                this.init();
            },
            onlinechange(e){
                this.init();
            },
            goback() {
            this.$router.go(-1);
            },
            
        }
        
    }

</script>


<style>
.yixuan {
    margin: 20px;
    color: #787878;
}
.el-select .el-input {
    width: 130px;
}
.daohang_content {
    margin-top: 10px;
}
</style>